<template>
  <ScalablePage>
    <div class="left">
      <!-- <img src="../assets/yxjc/tl1.png" style="width: 100%" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/yxjc/tl1.png" style="width: 100%" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <div class="gongshui">
        <img src="../assets/yxjc/l2.png" alt="" />
        <p>{{ chushui }} m3</p>
      </div>
      <div class="gs-chart">
        <div class="gs-title">
          <!-- <span class="title-m">月累计供水量</span> -->
          <!-- <span class="title-d">日供水量</span> -->
        </div>
        <div id="charts1" class="charts-gs"></div>
      </div>
      <!-- <img src="../assets/yxjc/tl2.png" alt="" style="width: 100%" /> -->
      <div class="screen-title-container-l1">
        <img src="../assets/yxjc/tl2.png" alt="" style="width: 100%" />
        <div class="screen-title-text-l1">更多</div>
      </div>
      <div class="shuizhi">
        <img src="../assets/yxjc/shuizhi.png" alt="" />
        <div class="shuizhi-con">
          <div class="shuizhi-con-item">
            <span>原水浊度</span
            ><span class="shuizhi-con-r shuizhi-con-r-col1">
              {{ water.yuanShui }} NTU</span
            >
          </div>
          <div class="shuizhi-con-item">
            <span>净水浊度</span
            ><span class="shuizhi-con-r shuizhi-con-r-col2"
              >{{ water.jingShui }} NTU</span
            >
          </div>
          <div class="shuizhi-con-item">
            <span>出水浊度</span
            ><span class="shuizhi-con-r shuizhi-con-r-col3"
              >{{ water.gongShui }} NTU</span
            >
          </div>
        </div>
      </div>
      <p style="color: #fff; margin-top: 17px">浊度曲线图</p>

      <div class="gs-chart" style="margin-top: 0">
        <div class="gs-title">
          <!-- <span class="title-y">原水浊度</span> -->
          <!-- <span class="title-d">净水浊度</span> -->
          <!-- <span class="title-m">出水浊度</span> -->
        </div>
        <div id="charts2" class="charts-gs"></div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue";
import { onMounted, reactive, toRefs, ref, watch, watchEffect } from "vue";
import useLineChart, { propData } from "@/myEcharts/useLineEcharts";

import {
  waterApi,
  waterInfoAPI,
  getWaterDataAPI,
  waterBestAPI,
} from "@/utils/shuiwu/api";
import { getMonth } from "@/utils/date";

const { smoothLineChart } = useLineChart();
const chushui = ref(0);

const state = reactive({
  water: {
    yuanShui: 0,
    jingShui: 0,
    gongShui: 0,
  },
});

let { water } = toRefs(state);
let arrData = ref({ name: "月累计供水量", color: "#FFD15C", data: [] });
let arrData1 = ref({ name: "月最佳出水效率", color: "#ff7402", data: [] });

// 原水  净水  出水
let shuizhi: propData[] = [
  { name: "原水浊度", color: "#2effd8", data: [] },
  { name: "净水浊度", color: "#1a79e8", data: [] },
  { name: "出水浊度", color: "#FFD15C", data: [] },
];

console.log(JSON.parse(localStorage.getItem("getShuizhi1")));

const getShuizhi1 = reactive(
  localStorage.getItem("getShuizhi1")
    ? JSON.parse(localStorage.getItem("getShuizhi1"))
    : [
        {
          name: "月累计供水量",
          color: "#FFD15C",
          data: [
            4600000, 4800000, 5300000, 5700000, 4600000, 3600000, 3300000,
            2602737, 3597849, 3713888, 4040865, 3093278,
          ],
        },
      ]
);

const getChushui1 = reactive(
  localStorage.getItem("getChushui1")
    ? JSON.parse(localStorage.getItem("getChushui1"))
    : [
        {
          name: "月最佳出水效率",
          color: "#ff7402",
          data: [89.2, 0, 86.3, 88.4, 87.5, 88.7, 88.9, 86, 87, 89, 80.7, 84],
        },
      ]
);

const getShuizhi2 = reactive(
  localStorage.getItem("getShuizhi2")
    ? JSON.parse(localStorage.getItem("getShuizhi2"))
    : [
        {
          name: "",
          color: "#2effd8",
          data: [
            5.45, 5.6, 5.5, 5.35, 5.45, 5.55, 5.52, 5.55, 5.758, 5.501, 7.091,
            7.808,
          ],
        },
        {
          name: "",
          color: "#1a79e8",
          data: [
            0.4, 0.6, 0.45, 0.4, 0.4, 0.45, 0.47, 0.44, 0.259, 0.291, 0.381,
            0.297,
          ],
        },
        {
          name: "",
          color: "#FFD15C",
          data: [
            0.39, 0.6, 0.55, 0.49, 0.39, 0.43, 0.4, 0.45, 0.221, 0.287, 0.429,
            0.344,
          ],
        },
      ]
);

watch(
  () => arrData.value.data,
  (newVal, oldVal) => {
    if (arrData.value.data.length === 12) {
      smoothLineChart("charts1", monthList, "", "", [
        arrData.value,
        arrData1.value,
      ]);
    }
    localStorage.setItem("getShuizhi1", JSON.stringify([arrData.value]));
  },
  { deep: true }
);

watch(
  () => arrData1.value.data,
  (newVal, oldVal) => {
    if (arrData1.value.data.length === 12) {
      smoothLineChart("charts1", monthList, "", "", [
        arrData.value,
        arrData1.value,
      ]);
    }
    localStorage.setItem("getChushui1", JSON.stringify([arrData1.value]));
  },
  { deep: true }
);

let i = 0,
  j = 0;
let monthList = getMonth().reverse();
let monthList1 = getMonth().reverse();

onMounted(async () => {
  console.log(getShuizhi1, getChushui1);
  smoothLineChart("charts1", monthList, "", "", [
    ...getShuizhi1,
    ...getChushui1,
  ]);
  smoothLineChart("charts2", monthList, "", "", getShuizhi2);
  getJingShui(631);
  getJingShui(642);
  getJingShui(643);
  getChuShui(642);
  // 显示月累计供水量
  // {dataType: "5", queryMonth: "2025-02"}

  waterInfo({ dataType: "5", queryMonth: monthList[i] });
  getWaterData({ dataType: "2", queryMonth: monthList[j] });
  waterBest();
});

function getJingShui(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let total = 0;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4377) {
        state.water.yuanShui = arr[i].value;
        return;
      }
      if (arr[i].modelId == 4641) {
        state.water.gongShui = arr[i].value;
        return;
      }
      if (arr[i].modelId == 4829) {
        state.water.jingShui = arr[i].value;
        return;
      }
      if (arr[i].modelId == 4389 || arr[i].modelId == 4390) {
        total += arr[i].value;
      }
    }
  });
}
function getChuShui(id: number) {
  waterApi(id).then((res) => {
    let arr = res.rows as any;
    let total = 0;
    for (let i = 0; i < arr.length; i++) {
      if (
        arr[i].modelId == 4631 ||
        arr[i].modelId == 4633 ||
        arr[i].modelId == 4634 ||
        arr[i].modelId == 4636 ||
        arr[i].modelId == 4637 ||
        arr[i].modelId == 4638 ||
        arr[i].modelId == 4639 ||
        arr[i].modelId == 4640
      ) {
        total += Number(arr[i].value);
      }
    }
    chushui.value = total;
  });
}

//  查询类型 1 送水泵房总供水瞬时流量；2 送水泵房总供水当日累计流量；3 送水泵房总供水昨日累计流量 ；4 送水泵房总供水年累计流量；5 送水泵房总供水月累计流量

function waterInfo(reg: { dataType: string; queryMonth: string }) {
  waterInfoAPI(reg).then((res) => {
    if (reg.queryMonth == "2024-05") {
      arrData.value.data.push(3600000);
    } else if (reg.queryMonth == "2024-06") {
      arrData.value.data.push(4500000);
    } else if (reg.queryMonth == "2024-07") {
      arrData.value.data.push(4600000);
    } else if (reg.queryMonth == "2024-08") {
      arrData.value.data.push(4800000);
    } else if (reg.queryMonth == "2024-09") {
      arrData.value.data.push(5300000);
    } else if (reg.queryMonth == "2024-10") {
      arrData.value.data.push(5700000);
    } else if (reg.queryMonth == "2024-11") {
      arrData.value.data.push(4600000);
    } else if (reg.queryMonth == "2024-12") {
      arrData.value.data.push(3600000);
    } else if (reg.queryMonth == "2025-01") {
      arrData.value.data.push(3300000);
    } else {
      arrData.value.data.push(Number(res.data.value || 0));
    }
    if (i == monthList.length - 1) {
      // smoothLineChart("charts1", monthList, "", "", [arrData.value, arrData1.value]);
    } else {
      waterInfo({ dataType: "5", queryMonth: monthList[++i] });
    }
  });
}

// 每月总出水效率
async function waterBest() {
  await waterBestAPI().then((res) => {
    const arrTime: any[] = [];
    res.data.forEach((item) => {
      const strArr = item.key.split("-");
      const key = strArr[0] + "-" + strArr[1];
      arrTime.push({
        key,
        value: item.value,
      });
    });
    
    console.log(arrTime);
    monthList.forEach((item, index) => {
      const exists = arrTime.some((i) => i.key === item);
      if (exists) {
        arrData1.value.data[index] = arrTime.find((i) => i.key === item).value;
      }else {
        arrData1.value.data[index] = 0
      }
    });
    console.log(arrData1.value.data);
  });
}

// 获取水质数据
function getWaterData(reg: { dataType: string; queryMonth: string }) {
  getWaterDataAPI(reg).then((res) => {
    // 原水  净水  出水
    if (reg.queryMonth == "2024-05") {
      shuizhi[0].data.push(5.5);
      shuizhi[1].data.push(0.6);
      shuizhi[2].data.push(0.33);
    } else if (reg.queryMonth == "2024-06") {
      shuizhi[0].data.push(5.45);
      shuizhi[1].data.push(0.4);
      shuizhi[2].data.push(0.39);
    } else if (reg.queryMonth == "2024-07") {
      shuizhi[0].data.push(5.6);
      shuizhi[1].data.push(0.6);
      shuizhi[2].data.push(0.6);
    } else if (reg.queryMonth == "2024-08") {
      shuizhi[0].data.push(5.5);
      shuizhi[1].data.push(0.45);
      shuizhi[2].data.push(0.55);
    } else if (reg.queryMonth == "2024-09") {
      shuizhi[0].data.push(5.35);
      shuizhi[1].data.push(0.4);
      shuizhi[2].data.push(0.49);
    } else if (reg.queryMonth == "2024-10") {
      shuizhi[0].data.push(5.45);
      shuizhi[1].data.push(0.4);
      shuizhi[2].data.push(0.39);
    } else if (reg.queryMonth == "2024-11") {
      shuizhi[0].data.push(5.55);
      shuizhi[1].data.push(0.45);
      shuizhi[2].data.push(0.43);
    } else if (reg.queryMonth == "2024-12") {
      shuizhi[0].data.push(5.52);
      shuizhi[1].data.push(0.47);
      shuizhi[2].data.push(0.4);
    } else if (reg.queryMonth == "2025-01") {
      shuizhi[0].data.push(5.55);
      shuizhi[1].data.push(0.44);
      shuizhi[2].data.push(0.45);
    } else {
      for (let m = 0; m < res.data.length; m++) {
        if (res.data[m].key && res.data[m].key.includes("原水")) {
          shuizhi[0].data.push(Number(res.data[m].value || 0));
        }

        if (res.data[m].key && res.data[m].key.includes("净水")) {
          shuizhi[1].data.push(Number(res.data[m].value || 0));
        }

        if (res.data[m].key && res.data[m].key.includes("出水")) {
          shuizhi[2].data.push(Number(res.data[m].value || 0));
        }
      }
    }

    if (j == monthList.length - 1) {
      localStorage.setItem("getShuizhi2", JSON.stringify(shuizhi));
      smoothLineChart("charts2", monthList, "", "", shuizhi);
      getShuizhi2;
    } else {
      getWaterData({ dataType: "2", queryMonth: monthList[++j] });
    }
  });
}
</script>

<style scoped>
.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.gongshui {
  padding-left: 150px;
  background: url(../assets/yxjc/l1.png) no-repeat;
  margin-top: 20px;
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 26px;
  color: #ffeda8;
  line-height: 30px;
  text-align: left;
  font-style: normal;
}

.gs-chart {
  position: relative;
  width: 100%;
  height: 272px;
  margin-top: 16px;
  margin-bottom: 20px;
}

.charts-gs {
  width: 100%;
  height: 100%;
}

.gs-title {
  position: absolute;
  width: 313px;

  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 20px;
  text-align: left;
  font-style: normal;
  left: 150px;
  top: 0;
}

.gs-title span {
  position: relative;
  margin-left: 40px;
  display: inline-block;
}

.gs-title .title-m::before {
  width: 18px;
  height: 4px;
  background: #ffd15c;
  content: "";
  left: -24px;
  top: 8px;
  position: absolute;
}

.gs-title .title-d::before {
  width: 18px;
  height: 4px;
  background: #1a79e8;
  content: "";
  left: -24px;
  top: 8px;
  position: absolute;
}

.gs-title .title-y::before {
  width: 18px;
  height: 4px;
  background: #2effd8;
  content: "";
  left: -24px;
  top: 8px;
  position: absolute;
}

.shuizhi {
  display: flex;
}

.shuizhi img {
  width: 105px;
  height: 115px;
  margin-top: 30px;
}

.shuizhi-con {
  flex: 1;
  margin-top: 10px;
}

.shuizhi-con > div:nth-child(1) {
  background: rgba(0, 170, 255, 0.1) url(../assets/yxjc/icon1.png) no-repeat 8px
    center;
}

.shuizhi-con > div:nth-child(2) {
  background: rgba(0, 170, 255, 0.1) url(../assets/yxjc/icon2.png) no-repeat 8px
    center;
}

.shuizhi-con > div:nth-child(3) {
  background: rgba(0, 170, 255, 0.1) url(../assets/yxjc/icon3.png) no-repeat 8px
    center;
}

.shuizhi-con-item {
  height: 36px;
  border-top: 1px solid #1a79e8;
  margin-top: 13px;
  width: 315px;
  margin-left: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;

  letter-spacing: 1px;
  text-align: left;
  font-style: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 40px;
  padding-right: 30px;
}

.shuizhi-con-r {
  font-family: D-DIN, D-DIN;
  font-weight: bold;
  font-size: 20px;
  line-height: 12px;
  text-align: right;
  font-style: normal;
}

.shuizhi-con-r-col1 {
  /* color: #eb5042; */
}

.shuizhi-con-r-col2 {
  /* color: #00bbff; */
}

.shuizhi-con-r-col3 {
  /* color: #14cc8f; */
}
</style>
